﻿//Page Block Background Styles
.page-block {

    &.bg-white {
        background: @white-color;
    }

    &.bg-primary em {
        color: @gray-darker;
    }

    &.bg-info {
        color: @gray-darker;

        .btn-default {
            background: darken(@btn-default-bg, 5%);
        }
    }

    &.bg-dark {
        background: @gray-darker;
        color: @gray-lighter;

        em {
            color: @brand-primary;
        }
    }
}

// Iconified
.page-block-iconified {
    margin: 35px 0 35px 0;

    &:first-child {
        margin-top: 0;
    }

    .page-block-icon, .page-block-img, .page-block-body {
        display: block;
    }

    .page-block-body {
        padding-bottom: 30px;
    }

    .page-block-icon {
        text-align: center;
        padding: 50px 0;

        .icon-helper {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .icon {
            color: @page-block-iconified-icon-color;
            font-size: @page-block-iconified-icon-font-size;
            position: static; // fix for Safari
            vertical-align: middle;
        }
    }

    a {
        * {
            color: @text-color;
        }

        h1, h2, h3 {
            color: @headings-color;
        }

        &:hover {
            text-decoration: none;

            * {
                color: @link-color;
            }

            .icon {
                text-decoration: none;
            }
        }
    }
}

// Statement
.page-block-statement {
    padding: 65px 0;
    position: relative;

    h1, h2, h3, h4 {
        color: inherit;
    }

    .container > *:first-child {
        margin-top: 0px;
    }

    .page-block-iconified {
        background: @white-color;

        .page-block-header, .page-block-body {
            padding-left: 35px;
            padding-right: 35px;
        }
    }
}

//Image and Text
.page-block-image-and-text {
    border-bottom: 1px solid @gray-lighter;
    padding-top: 80px;


    .page-block-image {
        text-align: center;

        img {
            .img-responsive();
        }
    }

    .page-block-text {
        position: relative;

        h1, h2, h3 {
            margin-bottom: 20px;
        }

        .btn {
            margin-top: 20px;
        }
    }
}

.content-column .page-block-statement .container, .content-column .page-block-image-and-text .container {
    .container-fluid();
    width: auto;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
    .three-columns .page-block-iconified, .two-columns .page-block-iconified {
        width: 100%;
        display: inline-block;
        overflow: hidden;
        margin: 0;

        .page-block-img {
            overflow: hidden;
        }

        .page-block-icon {
            height: 250px;
            padding: 0;
        }
    }

    .page-block-image-and-text {
        .page-block-text-inner {
            > *:first-child {
                margin-top: 0;
            }

            &.verticalalign-middle {
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                line-height: 1.6;
            }
        }
    }
}
